<template>
	<view class="area-nav">
		<view class="nav-center">
			<view class="ns-placeholder" v-if="!focus" @click="onFocus">
				<image class="search-icon" src="/pagesShop/static/search2.png" mode=""></image>
				<text>{{placeholder}}</text>
			</view>
			<view class="nav-search" v-else>
				<image class="search-icon" src="/pagesShop/static/search2.png" mode=""></image>
				<input type="text" v-model="value_in" :placeholder="placeholder" focus>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			value: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '商品/关键词'
			},
		},
		data() {
			return {
				value_in: '',
				focus: false,
			}
		},
		watch:{
			value(v) {
				this.value_in = v
			},
			value_in(v) {
				this.$emit('input',v)
			}
		},
		methods: {
			onFocus() {
				this.focus = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.area-nav {
		height: 40px;
		background-color: #00B4FF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.nav-center {
		width: 100%;
		padding: 0 30rpx;
	}
	
	.nav-search {
		position: relative;
		
		input {
			box-sizing: border-box;
			width: 100%;
			height: 30px;
			background-color: #fff;
			padding: 0 20rpx 0 75rpx;
			border-radius: 28rpx;
			font-size: 26rpx;
			color: #333;
		}
		
		.search-icon {
			width: 16px;
			height: 16px;
			position: absolute;
			left: 12px;
			top: 8px;
		}
	}
	
	.ns-placeholder {
		width: 100%;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 30rpx;
		
		text {
			font-size: 26rpx;
			color: #333;
		}
		
		.search-icon {
			width: 16px;
			height: 16px;
			margin-right: 20rpx;
		}
	}
</style>
